<!--主页-->
<template>
    <div class="body-bac-container">

        <div class="home-index-container container">
            <!--左边-->
            <el-row>
                <el-col :span="17" class="col-left">

                    <div class="bac-container-none-padding">
                        <div class="col-head">
                            <el-menu :default-active="menuIndex" mode="horizontal" @select="selectMenu"
                                     active-text-color="#007cdc">
                                <el-menu-item index="1">他的动态</el-menu-item>
                                <el-menu-item index="2">他的赞</el-menu-item>
                                <el-menu-item index="3">他的收藏</el-menu-item>
                            </el-menu>
                        </div>
                    </div>
                    <div class="col-right-container " v-infinite-scroll="load" infinite-scroll-distance="100"
                         infinite-scroll-delay="500">
                        <dynamic-container :data="dynamic" v-for="(dynamic,index) in dynamicList"
                                           :key="index"
                                           v-on:openComplaintDialog="openComplaintDialog"></dynamic-container>
                        <div class="empty-container" v-if="dynamicList.length == 0">
                            <div class="bottom-text">{{loading == false ? '暂无动态' : '加载中'}}</div>
                        </div>
                    </div>
                    <el-alert
                            v-if="dynamicList.length > 0 || loading"
                            :title="loading == false && loadFlag == false ? '没有更多了' : '加载中...'"
                            center
                            :closable="false"
                            type="success">
                    </el-alert>
                </el-col>
                <!--右边-->
                <el-col :span="7" class="col-right">
                    <!--个人信息框-->

                    <div class="bac-container" :class="isFixeds? 'left-sub-fixed':''">
                        <ul class="user-info">
                            <li>
                                <el-avatar :size="50" :src="currentUser.headUrl"></el-avatar>
                            </li>
                            <li class="user-name">{{currentUser.realName}}</li>
                            <li class="user-position" v-if="currentUser.profession">{{currentUser.profession}}</li>
                            <li class="user-company">{{currentUser.company}}</li>
                            <li class="user-data">
                                <div class="user-data-item">
                                    <div>
                                        <el-link :underline="false">{{dataQuantity.dynamicQuantity}}</el-link>
                                    </div>
                                    <div>
                                        <span>动态</span>
                                    </div>
                                </div>
                                <div class="user-data-item">
                                    <el-divider direction="vertical"></el-divider>
                                </div>
                                <div class="user-data-item">
                                    <div>
                                        <el-link :underline="false">{{dataQuantity.friendQuantity}}</el-link>
                                    </div>
                                    <div>
                                        <span>关注</span>
                                    </div>
                                </div>
                                <div class="user-data-item">
                                    <el-divider direction="vertical"></el-divider>
                                </div>
                                <div class="user-data-item">
                                    <div>
                                        <el-link :underline="false">{{dataQuantity.fansQuantity}}</el-link>
                                    </div>
                                    <div>
                                        <span>粉丝</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="bac-container-none-padding" :class="isFixeds? 'left-sub-fixed':''" v-if="currentUser.cardUrl">
                        <div class="bac-container-title">名片
                        </div>
                        <el-image :src="currentUser.cardUrl"
                                  style="width: 300px; height: 200px" fit="contain"></el-image>
                    </div>

                    <div class="left-container bac-container-none-padding" :loading="loading"
                         v-if="recommendUserList.length > 0">
                        <div class="bac-container-title-border">推荐人脉
                            <el-link :underline="false" @click="$router.push({name:'recommend-user-list'})">全部 <i
                                    class="el-icon-arrow-right"></i></el-link>
                        </div>
                        <ul class="user-list-mini">
                            <li v-for="(user,index) in recommendUserList" :key="home-index" class="user-item">
                                <el-row>
                                    <el-col :span="4" class="user-avatar">
                                        <div @click="openHome(user.userId)">
                                            <el-avatar :size="40" :src="user.headUrl"></el-avatar>
                                        </div>
                                    </el-col>
                                    <el-col :span="16" class="user-data">
                                        <div class="user-name" @click="openHome(user.userId)">
                                            <span>{{user.realName}}</span> &nbsp;
                                            <!--<el-tag type="danger" size="mini" effect="plain" v-if="user.type == 1">v-->
                                            <!--</el-tag>-->
                                            <!--<el-tag type="danger" size="mini" effect="plain"-->
                                            <!--v-if="user.creditLevel == 1">实名-->
                                            <!--</el-tag>-->
                                        </div>
                                        <div class="user-data-item">
                                            <span>简介：</span>
                                            {{user.synopsis}}
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="user-operate">
                                            <el-button size="mini" @click="userConcernAdd(user)"
                                                       :loading="user.addLoading" v-if="user.concernUserId == null"><i
                                                    class="el-icon-plus"></i>关注
                                            </el-button>
                                            <el-button size="mini" plain v-else>{{user.isEachOther ? '已互关' : '已关注'}}
                                            </el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </li>

                        </ul>
                    </div>
                </el-col>
            </el-row>

            <!--投诉-->
            <el-dialog title="投诉" :visible.sync="complaintDialogVisible" width="40%" center>
                <el-form label-width="100px" size="mini">
                    <el-form-item label-width="0">
                        <el-checkbox label="虚假内容" name="type"></el-checkbox>
                        <el-checkbox label="侵权" name="type"></el-checkbox>
                        <el-checkbox label="网络暴力" name="type"></el-checkbox>
                        <el-checkbox label="色情" name="type"></el-checkbox>
                        <el-checkbox label="反动" name="type"></el-checkbox>
                        <el-checkbox label="其他" name="type"></el-checkbox>
                    </el-form-item>
                    <el-form-item label-width="0">
                        <el-input type="textarea" placeholder="备注内容"></el-input>
                    </el-form-item>
                    <el-form-item label-width="0">
                        <el-alert title="上述内容仅对【商友会】工作人员可见，可帮助我们公共维护一个干净和谐的商务交流环境" type="success" :closable="false">
                        </el-alert>
                    </el-form-item>
                </el-form>
                <span slot="footer">
                <el-button @click="complaintDialogVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="complaintDialogVisible = false" size="mini">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import dynamicContainer from '@/components/dynamic-container.vue'
    import util from '@/utils/commonUtil';

    export default {
        components: {
            "dynamic-container": dynamicContainer
        },
        data: function () {
            return {
                loading: false,
                loadFlag: false,
                menuIndex: "1",
                isFixeds: false,
                complaintDialogVisible: false,//投诉框
                industryCategoryVisible: false,//选择分类框
                params: {
                    page: 1,
                    size: 20,
                    count: 0
                },
                dynamicList: [],
                currentUser: {},
                dataQuantity: {},
                recommendUserList: []
            }

        },
        methods: {
            getUserInfo() {
                this.$post("/user/details/getUserInfoById", {id: this.currentUser.userId}).then((res) => {
                    this.currentUser = res.data
                })
                this.$post("/user/dataQuantity/queryListByUserId", {id: this.currentUser.userId}).then(res => {
                    this.dataQuantity = res.data
                })
            },
            getRecommendUser() {
                this.loading = true;
                this.$post("/user/concern/queryRecommendUserPage", {
                    page: 1,
                    size: 15
                }).then(res => {
                    if (res.data.rows == null || res.data.rows.length == 0) {
                        this.loading = false;
                        return;
                    }
                    res.data.rows.forEach(u => {
                        u.headUrl = util.setDefaultHead(u.headUrl);
                        u.addLoading = false;
                    })
                    this.recommendUserList = res.data.rows;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },
            initData() {
                let url = null;
                let tempIndex = this.menuIndex;
                switch (this.menuIndex) {
                    case "1":
                        url = "/dynamic/queryPageByMyself";
                        break;
                    case "2":
                        url = "/dynamic/queryPageByUserLike";
                        break;
                    case "3":
                        url = "/dynamic/queryPageByUserCollection";
                        break;
                }
                this.loading = true;
                this.params.userId = this.currentUser.userId;
                this.$post(url, this.params).then(res => {
                    if (this.menuIndex != tempIndex) {
                        this.loading = false;
                        return;
                    }
                    this.params.count = res.data.count;
                    if (res.data.rows == null || res.data.rows.length == 0) {
                        this.loading = false;
                        this.loadFlag = false;
                        return;
                    }
                    this.dynamicList = this.dynamicList.concat(res.data.rows);
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                    this.loadFlag = false;
                })
            },
            load() {
                if (this.loading || (this.loadFlag == false && this.params.count == this.dynamicList.length)) {
                    return;
                }
                this.params.page++;
                this.initData();
            },
            selectMenu(index) {
                this.menuIndex = index;
                this.params.page = 0;
                this.loadFlag = true;
                this.loading = false;
                this.dynamicList = [];
                this.load();
            },
            openComplaintDialog() {
                this.complaintDialogVisible = !this.complaintDialogVisible;
            },
            handleScroll() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                if (scrollTop > 400) {//提前判断要上升多少像素就固定
                    this.isFixeds = true;
                } else {
                    this.isFixeds = false;
                }
            },
            userConcernAdd(user) {
                user.addLoading = true;
                this.$post("/user/concern/add", {
                    concernUserId: user.userId
                }).then(res => {
                    user.concernUserId = res.data.concernUserId
                    user.isEachOther = res.isEachOther;
                    user.addLoading = false;
                }).catch(() => {
                    user.addLoading = false;
                })
            },
            openHome(id) {
                this.$router.push({
                    path: "/home",
                    query: {
                        id: id
                    }
                })
            }
        },
        mounted() {
            console.log(this.$route.query)
            // if(this.$route.params.id== undefined){
            //     this.$router.push("/");
            //     return
            // }
            this.currentUser.userId = this.$route.query.id;
            this.getUserInfo();
            this.initData();
            this.getRecommendUser();
            window.addEventListener('scroll', this.handleScroll)
        }
    }
</script>

<style>

    .big-image {
        width: 100%;
        height: 212px;
        border-radius: 4px;
    }

    .home-index-container .col-head .el-menu {
        border-bottom: none;
    }

    .home-index-container .col-head .el-menu-item {
        height: 42px;
        line-height: 42px;

    }


    .home-index-container .col-head .is-active {
        font-weight: 600;
    }

    /**
    用户信息
     */
    .home-index-container .user-info {
        text-align: center;
        margin: 20px 0 10px;
        font-size: 13px;
    }

    .home-index-container .user-info li {
        margin-top: 5px;
        line-height: 20px;
    }

    .home-index-container .user-info .user-name {
        font-size: 15px;
        font-weight: 600;
    }

    .home-index-container .user-info .user-position, .user-info .user-company {
        color: #606266;
        font-weight: 500;
    }

    .home-index-container .user-info .user-data {
        margin-top: 10px;
    }

    .home-index-container .user-info .user-data .user-data-item {
        display: inline-block;
        padding: 0 3px;
        color: #606266;
    }

    .home-index-container .user-info .user-data .user-data-item .el-link--inner {
        color: #303133;
        font-weight: 600;
    }

    .home-index-container .user-info .user-data-item .el-divider--vertical {
        height: 2em;
        vertical-align: unset;
    }

    /**
    登陆
    **/
    .home-index-container .login-title {
        line-height: 30px;
        margin-bottom: 15px;
        font-size: 15px;
        font-weight: 600;
    }

    .home-index-container .login-container {
        margin-bottom: 10px;
        padding: 20px 20px 0px;
    }


    /**
推荐列表
*/
    .home-index-container .user-list-mini {
        padding: 0px 10px 10px;
        margin: 0;
    }

    .home-index-container .user-list-mini .user-item {
        padding: 5px 0px;
        margin: 5px 0px;
        position: relative;
    }

    .home-index-container .user-list-mini .user-name {
        line-height: 28px;
        font-size: 15px;
        font-weight: 700;
        color: #303133;
    }

    .home-index-container .user-list-mini .user-data {
        padding-left: 5px;
        font-size: 12px;
        line-height: 12px;
        color: #606266;
    }

    .home-index-container .user-list-mini .user-data-item {
        display: block;
        width: 100%;
        overflow: hidden;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
    }

    .home-index-container .user-list-mini .user-operate {
        position: absolute;
        right: 0;
        top: 10px;
    }

    .home-index-container .user-list-mini .el-button--mini {
        padding: 3px 5px
    }

    .el-alert-primary {
        color: #6699CC;
        background-color: rgb(236, 245, 255);
    }

    .el-divider__text.is-center {
        background-color: #f6f6f6;
        color: #909399
    }

    .el-divider.el-divider--horizontal {
        background-color: #EBEEF5;
    }


</style>
